<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	    class Dialog {
      constructor(text) {
        this.lastX = 0
        this.lastY = 0
        this.x
        this.y
        this.text = text || ''
        this.isMoving = false
        this.dialog
      }
      open() {
        const model = document.createElement('div')
        model.id='model'
        model.style = `
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background-color:rgba(0,0,0,.3);
        display:flex;
        justify-content: center;
        align-items: center;`
        model.addEventListener('click',this.close.bind(this))
        document.body.appendChild(model)
        this.dialog = document.createElement('div')
        this.dialog.style = `
        padding:20px;
        background-color:white`
        this.dialog.innerText = this.text
        this.dialog.addEventListener('click',e=>{e.stopPropagation()})
        this.dialog.addEventListener('mousedown', this.handleMousedown.bind(this))
        document.addEventListener('mousemove', this.handleMousemove.bind(this))
        document.addEventListener('mouseup', this.handleMouseup.bind(this))
        model.appendChild(this.dialog)
      }
      close() {
        this.dialog.removeEventListener('mousedown',this.handleMousedown)
        document.removeEventListener('mousemove', this.handleMousemove)
        document.removeEventListener('mouseup',this.handleMouseup)
        document.body.removeChild(document.querySelector('#model')) 
      }
      handleMousedown(e) {
        this.isMoving = true
        this.x = e.clientX
        this.y = e.clientY
      }
      handleMousemove(e) {
        if (this.isMoving) {
          this.dialog.style.transform = `translate(${e.clientX - this.x + this.lastX}px,${e.clientY - this.y + this.lastY}px)`
        }
      }
      handleMouseup(e) {
        this.lastX = e.clientX - this.x + this.lastX
        this.lastY = e.clientY - this.y + this.lastY
        this.isMoving = false
      }
    }
    let dialog = new Dialog('Hello')
    dialog.open()
</script>
</body>
</html>